<template>
  <div class="box">
    <!-- 这是一个专题精选的组件 -->
    <h1>专题精选</h1>

    <!-- <div class="van-swipe__track" > 
      <div class="van-swipe-item" style="width: 300px" :loop="false"  v-for="item in topicList" :key="item.id">
       
      </div> 
     
    </div> -->

    <van-swipe :loop="false" :width="300" :touchable="true" class="van-swipe__track" :show-indicators="false">
        <van-swipe-item v-for="item in topicList" :key="item.id" class="van-swipe-item">
            <img :src="item.item_pic_url" alt=""> 
            <p>{{item.title}}</p>
            <p>{{item.subtitle}}</p>
        </van-swipe-item>
        
    </van-swipe>
  </div>
</template>

<script>
export default {
  name: "TopicList",
  data() {
    return {};
  },
//   在这里使用props:['传递进来的属性名']来接收数据
  props:['topicList'],
  mounted(){
    setTimeout(()=>{
        console.log(this.topicList);
    },200)
  }
};
</script>

<style scoped lang='less'>
.box {
     padding:0 10px;
     box-sizing:border-box;
  h1 {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
  }
  .van-swipe__track{
          height:300px;
         line-height: 200px;
          text-align: center;
         
      .van-swipe-item{
        margin-right:10px;
        img{            
            width:100%;
            height:200px;
        }
        p{
            height:20px;
            line-height:20px;
            font-size:16px;
            margin-top:10px;
            text-align: left;
            // 下面的这三句代码时一行显示省略号
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
      }
  }
}
</style>